<template>
   <div class="wenjian">
<!-- 文件添加删除区域 -->
    <div class="wenjian1">
  <el-button type="primary" @click="btn3" class="btn">上传文件</el-button>
  <el-button type="primary"  class="btn" @click="xiawenjian">批量下载文件</el-button>
  <el-button type="danger"  class="btn" @click="deletewenjian">删除文件</el-button>
   
<el-dialog title="上传文件" :visible.sync="isshow">
  <el-form :model="submit1">
      <span>班级:</span>
  <el-select v-model="submit1.classId" placeholder="请选择班级">
    <el-option
      v-for="item in banjilist"
      :key="item.cid"
      :label="item.className"
      :value="item.cid">
    </el-option>
  </el-select><br>
  <span>课程:</span>
  <el-select v-model="submit1.courseId"  placeholder="请选择课程">
    <el-option
      v-for="item in kechenglist"
      :key="item.courseId"
      :label="item.courseName"
      :value="item.courseId">
    </el-option>
  </el-select><br>
   <span>文件类型</span>
  <el-select v-model="submit1.type"  placeholder="请选文件类型">
    <el-option
      v-for="item in typelist"
      :key="item.status"
      :label="item.name"
      :value="item.status">
    </el-option>
  </el-select>
<!-- 上传区域 -->
<el-upload
  class="upload-demo" :limit="5" :multiple='true' :data="submit1"  :on-success="upFile" :headers="headers"
  ref="upload"
  :action='url'
  :file-list="arrlist"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
  <div slot="tip" class="el-upload__tip">不超过5个文件</div>
</el-upload>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isshow = false">取 消</el-button>
    <el-button type="primary" @click="submitUpload">确 定</el-button>
  </div>
</el-dialog>
    </div>
<!-- 文件筛选区域 -->
    <div class="wenjian2">
<span>文件筛选:</span><br>
 
   <span>文件名称:</span> <el-input v-model="from.fileName" placeholder="请输入文件名称" style=" display: inline-block; width:120px;"></el-input>
 
<span>班级筛选</span>
  <el-select v-model="from.classId" clearable placeholder="请选择班级">
    <el-option
      v-for="item in banjilist"
      :key="item.cid"
      :label="item.className"
      :value="item.cid">
    </el-option>
  </el-select>
  <span>课程筛选</span>
  <el-select v-model="from.courseId" clearable placeholder="请选择课程">
    <el-option
      v-for="item in kechenglist"
      :key="item.courseId"
      :label="item.courseName"
      :value="item.courseId">
    </el-option>
  </el-select>
   <span>文件类型</span>
  <el-select v-model="from.type" clearable placeholder="请选文件类型">
    <el-option
      v-for="item in typelist"
      :key="item.status"
      :label="item.name"
      :value="item.status">
    </el-option>
  </el-select>

    <el-button type="primary" @click="sxbtn">筛选</el-button>
    </div>
    <!-- 文件列表区域 -->
    <div class="wenjian3">
        <el-table ref="multipleTable"  :data="wenzhanglist" border tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="姓名"
      width="80">
      <template slot-scope="scope">{{ scope.row.user.realName }}</template>
    </el-table-column>
     <el-table-column
      label="性别"
      width="50">
      <template slot-scope="scope">{{ scope.row.user.gender}}</template>
    </el-table-column>
    <el-table-column
      label="班级"
      width="100">
      <template slot-scope="scope">{{ scope.row.aclass.className}}</template>
    </el-table-column>
    <el-table-column
      label="课程"
      width="100">
      <template slot-scope="scope">{{ scope.row.course.courseName}}</template>
    </el-table-column>
    <el-table-column
      prop="fileName"
      label="文件名称"
      width="120">
    </el-table-column>
    <el-table-column
    width="150"
      prop="createTime"
      label="上传时间"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"><a :href="xiazai" >下载</a></el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
<!-- 分页区域 -->
    <div class="wenjian4">
    <el-pagination
    :page-size=limit @current-change='change1'
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
    </div>
   </div>
</template>

<script>
import { http,URL } from '@/uitl/request'
import {getToken} from '@/api/login'
import fileDownload from 'js-file-download';
import Axios from 'axios'
export default {
    created(){
this.getlist()

    },
    data(){
        return{
            isshow:false,
            kechenglist:[],
            banjilist:[],
            wenzhanglist:[],
            typelist:[],
            from:{courseId:0,classId:0,type:0,fileName:''},
            del:[],
            page:1,
            limit:15,
            xiazai:``,
            submit1:{type:0,classId:0,courseId:0},
            arrlist:[],
            url:URL+'/file/uploadFile',
            headers:{ "token":getToken()},
            userin:this.$store.state.userinfo,
            pi:''
        }
    },
    methods:{
  //上传按钮事件
      btn3(){
        const userinfo=this.$store.state.userinfo
        if(userinfo.level>3){
          this.isshow=true
        }else{
          this.$message.error('权限不足')
          this.isshow=false
        }
        

      },
//获取筛选条件和文章列表
async getlist(){
  console.log(this.userin);
    try {
    //  console.log(this.kechenglist);
       const banji=await http.post('/class/getClassList')
       this.banjilist=banji.data.data
    //  console.log(this.banjilist);
    const typ=await http.get('/file/getFileType')
    this.typelist=typ.data.data
   // console.log(this.type);
   const {data:res}=await http.post(`/file/findFileList/${this.page}/${this.limit}`)
   this.wenzhanglist=res.data.list
  // console.log(this.wenzhanglist);
   // const  kecheng=await http.get(`/class/findById/${this.userin.cid}`)
      const kecheng=await http.post(`/course/findCourseList/1/50`) 
       if(!kecheng.data.data) {
              this.$message.error(kecheng.data.msg)
              return
            }
       this.kechenglist=kecheng.data.data.records
    } catch (err) {
        Promise.reject(err)
    }
},
//筛选条件查询
 async sxbtn(){
    this.page=1
   try {
        const {data:res}=await http.post(`/file/findFileList/${this.page}/${this.limit}`,this.from)
        if(res.data == undefined) {
              this.$message.error(res.msg)
              
            }
             if(res.data.total==0){
               this.$message.error('此条件文件不存在')
              
            }
   this.wenzhanglist=res.data.list
//console.log(this.from);
   } catch (err) {
       Promise.reject(err)
   }
},
//获取要删除的信息
handleSelectionChange(val){
    this.del=val
},
//删除文件
async deletewenjian(){
    const arr=[]
    this.del.map(ite=>{
        arr.push(ite.fid)
    })
    try {
        const {data:res}=await http.post('/file/deleteFile',arr)
        if(res.data == undefined) {
              this.$message.error(res.msg)
              return
            }
        this.$message({type:'success',message:res.data})
        const list=await http.post(`/file/findFileList/${this.page}/${this.limit}`,this.from)
   this.wenzhanglist=list.data.data.list
    } catch (err) {
        Promise.reject(err)
    }
},
//批量下载文件
async xiawenjian(){
   const arr=[]
    this.del.map(ite=>{
        arr.push(ite.fid)
    })

    try {
       this.download(arr)
    } catch (err) {
      Promise.reject(err)
    }
},
 download(arr) {
    var requestUrl = URL+"/file/package";
    //var Authorization = getToken();
    Axios({
       method: 'post',
       url: requestUrl,
       data:arr,
      //  headers: {
      //     'Authorization': Authorization
      //  },
           responseType: 'blob'
       }).then(res => {
           fileDownload(res.data, 'deviceModel.zip');
       })},
//获取当前页数
async change1(val){
    this.page=val
 try {
        const {data:res}=await http.post(`/file/findFileList/${this.page}/${this.limit}`,this.from)
   this.wenzhanglist=res.data.list
//console.log(this.from);
   } catch (err) {
       Promise.reject(err)
   }
},
//下载文件
 handleEdit(index,row){
 //   http://192.168.1.109:8090/file/downloadFile/${}
//this.xiazai=`http://192.168.1.109:8090/file/downloadFile/${row.fid}`
this.xiazai=URL+`/file/downloadFile/${row.fid}`
},
 async submitUpload() {
     try {
            this.$refs.upload.submit();
this.submit1={type:0,cid:0,courseId:0}
     } catch (err) {
         Promise.reject(err)
     }
      },
//上传成功调用
async upFile(res){

   try {
        this.isshow=false
this.$message({type:"success",message:res.data})
 this.$router.go()
   } catch (err) {
       Promise.reject(err)
   }

}
    },
}
</script>

<style scoped>
.wenjian{
    line-height: 25px;
}
.wenjian1{
    width: 100%;
    height: 50px;
}
.btn{
    float: left;
    margin: 0px 10px ;
}
.wenjian2{
    text-align: left;
}
.wenjian2 span{
    margin: 0px 2px 0px 10px;
}

</style>